{% extends "template_base.html" %}
{% block title %}DeepyWeb - Manage your old tasks{% endblock %}
{% block script %}
<script>
    $(function () {
        $('.desc-text').mouseover(function (e) {
            $('#kyqToolTip').css("display", "block");
            $("#kyqToolTip").css("left", e.screenX + 50);
            $("#kyqToolTip").css("top", e.screenY - 50);
            $("#kyqToolTip").text(this.innerText);
            console.log(this.innerText);
        })
        $('.desc-text').mouseout(function (e) {
            $('#kyqToolTip').css("display", "none");
        })

        {
            var text = document.getElementById("my_alert").textContent;
            if (text != '') {
                alert(text);
            }
        }
    });


</script>
{% endblock %}
{% block navbar %}
<div id="kyqToolTip" class="tipStyle"
     style="display:none; word-break:break-word; width:200px; position:absolute; background-color:#F0F8FF; font-size:16px; border-right:#D0EAF9 solid 1px; border-bottom:#D0EAF9 solid 1px; border-left:#D0EAF9 solid 1px; border-top:#D0EAF9 solid 1px;"></div>

<nav id="navbar" class="navbar">
    <ul>
        <!--<li><a class="nav-link scrollto active " href="#header">Home</a></li>-->
        <li><a class="nav-link scrollto" href="/welcome">主 页</a></li>
        {% if not logged %}
        <li><a class="getstarted scrollto" href="login">登 录</a></li>
        {% endif %}
        {% if logged %}
        <li><a class="getstarted scrollto" href="logout">登 出</a></li>
        {% endif %}

    </ul>
    <i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
{% endblock %}

{% block main %}
<main id="main">
    <span id="my_alert" style="display:none;">{{my_alert}}</span>
    <!-- ======= Breadcrumbs ======= -->
    <section class="breadcrumbs">
        <div class="container">
            <ol>
                <li><a href="/welcome">Home Page</a></li>
            </ol>
            <h2>Manage your tasks</h2>
        </div>
    </section>
    <!-- End Breadcrumbs -->

    <section class="inner-page">
        <div class="container">

            <!-- Outer Row -->
            <div class="register-form">
                <div class="col-xl-10 col-lg-12 col-md-9" style="margin: 0 auto">
                    <div class="card o-hidden border-0 shadow-lg my-5">
                        <div class="card-body p-0">
                            <!-- Nested Row within Card Body -->
                            <div class="p-5">
                                <div class="text-center">
                                    <h2>您&nbsp;的&nbsp;全&nbsp;部&nbsp;任&nbsp;务</h2>
                                </div>
                                <br>
                                <form method="POST" name="selectForm">
                                    <div class="app-expense-grid__item-24 expense-order-table">
                                        <div class="app-expense-grid__box">
                                            <div class="app-expense-table app-expense-table--bordered">
                                                <div class="app-expense-table__header">
                                                    <table class="app-expense-table__box" style="width: 100%">
                                                        <colgroup>
                                                            <col style="width: 10%;">
                                                            <col style="width: 30%;">
                                                            <col style="width: 40%;">
                                                            <col style="width: 20%;">
                                                        </colgroup>
                                                        <thead>
                                                        <tr>
                                                            <th class="">
                                                                <div><span class="app-expense-text-overflow"
                                                                           title="TaskRuntimeID">任务ID</span></div>
                                                            </th>
                                                            <th class="">
                                                                <div style="text-align:center"><span
                                                                        class="app-expense-text-overflow"
                                                                        title="TaskType">任务类型</span>
                                                                </div>
                                                            </th>
                                                            <th class="">
                                                                <div style="text-align:center"><span
                                                                        class="app-expense-text-overflow"
                                                                        title="Status">任务描述</span></div>
                                                            </th>
                                                            <th class="">
                                                                <div style="text-align:center"><span
                                                                        class="app-expense-text-overflow"
                                                                        title="Status">删除</span></div>
                                                            </th>
                                                        </tr>
                                                        </thead>
                                                    </table>
                                                </div>
                                                <hr>
                                                <div class="app-expense-table__body">
                                                    <table class="app-expense-table__box"
                                                           style="width: 100%;table-layout: fixed;margin-top: 10px;">
                                                        <colgroup>
                                                            <col style="width: 10%;">
                                                            <col style="width: 30%;">
                                                            <col style="width: 40%;">
                                                            <col style="width: 20%;">
                                                        </colgroup>


                                                        <tbody>
                                                        {% for result in results %}
                                                        <tr class="">

                                                            <td class="">
                                                                <div><span
                                                                        title="taskID">{{ result['t_id'] }}</span>
                                                                </div>
                                                            </td>

                                                            <td class="">
                                                                <div style="text-align:center"><span
                                                                        title="taskType">{{ result['t_type'] }}</span>
                                                                </div>
                                                            </td>

                                                            <td class="">
                                                                <div style="text-align:center"><span
                                                                        class="desc-text"
                                                                        title="taskDescription">{{ result['t_descript'] }}</span>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div style="text-align: center;margin: auto">
                                                                    <a href="del_task/{{ result['t_id'] }}">
                                                                        <img
                                                                                src="../static/assets/img/bin.png"
                                                                                style="width: 20px">
                                                                    </a>


                                                                </div>

                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                        </tbody>

                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <br>
                                    <div class="text-center" style="margin: 0 auto;">
                                        <div class="btn btn-primary btn-user btn-block">
                                            <a href="/"
                                               class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center"
                                               style=" line-height: 0;
                                                        padding: 10px 20px;
                                                        border-radius: 4px;
                                                        transition: 0.5s;
                                                        color: #fff;

                                                        font-size: 15px">
                                                <span>返 回 主 页</span>
                                                <i class="bi bi-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>

                                </form>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!-- End #main -->
{% endblock %}